import React,{Component} from 'react';
import PropTypes from 'prop-types';

import './Navigation.less';

class NavConfigProvider extends Component {

    static childContextTypes = {
        setNavigation: PropTypes.func,
        navConfig:null
    };

    state = {
        navConfig:null
    };

    constructor(props){
        super(props);
        this.setNavigation = this.setNavigation.bind(this);
    }


    getChildContext() {
        return {
            setNavigation: this.setNavigation,
            navConfig:this.state.navConfig
        };
    }


    setNavigation(navConfig){
        this.setState({navConfig:navConfig});
    }


    render() {
        return this.props.children;
    }
}




class Navigation extends Component {


    static contextTypes = {
        setNavConfig: PropTypes.func,
        router: PropTypes.object
    };

      constructor(props){
          super(props);
          this.backClickHandle = this.backClickHandle.bind(this);
      }

      backClickHandle(){
          this.context.router.history.goBack();
      }


    render(){


        let leftAction = <div className="left-action" onClick={this.backClickHandle} ></div>;
        let centerAction = null;
        let rightAction = <div className="right-action"></div>;


        let navConfig =  this.props.navConfig;
        if (navConfig){

            let {left,center,right} = navConfig;

            if (left){
                leftAction = left;
            }

            if (center){
                if (typeof center == "string"){
                    centerAction = <p className="center-action">{center}</p>;
                }else{
                    centerAction = center;
                }
                
            }

            

            if (right){
                rightAction = right;
            }


        }


        return (
            <div className="navigation">
                <div className="left">{leftAction}</div>
                <div className="center">{centerAction}</div>
                <div className="right">{rightAction}</div>
            </div>
        );
    }
}



export default  Navigation;